<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery EasyUI Demo for Java</title>
		<!-- 主题可以通过themes/下的easyui.css进行更换 -->
		<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.4/themes/ui-cupertino/easyui.css">
		<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.4/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.4/demo/demo.css">
		<script type="text/javascript" src="jquery-easyui-1.9.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.9.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.9.4/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript">
			var url;

			function deleteUser() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$.messager.confirm("系统提示", "您确定要删除这条记录吗?", function(r) {
						if (r) {
							$.post('userDelete', {
								delId: row.id
							}, function(result) {
								if (result.success) {
									$.messager.alert("系统提示", "已成功删除这条记录!");
									$("#dg").datagrid("reload"); //刷新前端
								} else {
									$.messager.alert("系统提示", result.errorMsg);
								}
							}, 'json');
						}
					});
				}
			}

			function newUser() {
				$("#dlg").dialog('open').dialog('setTitle', '添加用户');
				$('#fm').form('clear');
				url = 'userSave'; //Ajax发送至后端服务器
			}


			function editUser() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$("#dlg").dialog('open').dialog('setTitle', '编辑用户');
					$('#fm').form('load', row); //加载当前行的数据
					url = 'userSave?id=' + row.id; //Ajax发送至后端服务器
				}
			}


			function saveUser() {
				$('#fm').form('submit', {
					url: url, //Ajax发送至后端服务器对应的url
					onSubmit: function() {
						return $(this).form('validate');
					},
					success: function(result) {
						var result = eval('(' + result + ')'); //转化为前端JSON
						if (result.errorMsg) {
							$.messager.alert("系统提示", result.errorMsg);
							return;
						} else {
							$.messager.alert("系统提示", "保存成功");
							$('#dlg').dialog('close');
							$("#dg").datagrid("reload"); //刷新前端
						}
					}
				});
			}

			/*
			 * ajax无法直接接收导出的excel。
			 * 因为ajax只处理返回的字符流，而后端返回前端的excel是二进制的字节流，ajax无法处理。
			 * 对于二进制的字节流只能交给浏览器来处理。
			 */
			function exportUser() {
				var searchVal = $('#searchBox').val();
				console.log("查找关键字：" + searchVal);

				if (searchVal != "") {
					//使用window.open()方法，浏览器会“跳窗”，闪一下。
					//window.open("exportExcel?searchKey="+searchVal);
					window.location.href = "exportExcel?searchKey=" + searchVal;
				} else {
					//window.open("exportExcel");
					window.location.href = "exportExcel";
				}
			}

			function searchUser() {
				var searchVal = $('#searchBox').val();
				console.log("查找关键字：" + searchVal);
				if (searchVal != '') { //查找框有输入
					$('#dg').datagrid({
						url: 'userList',
						queryParams: {
							"searchVal": searchVal
						}
					});
				} else { //没有输入则全量显示
					$('#dg').datagrid({
						url: 'userList',
						queryParams: {}
					});
				}
			}

			function importUser() {
				$("#uploadDlg").dialog('open').dialog('setTitle', '批量导入数据');
			}

			function downloadTemplate() {
				//对应jsp&servlet项目（Dynamic Web Project）的WebContent/template/template.xls
				window.open('template/template.xls');
			}

			function uploadFile() {
				console.log("到uploadFile");
				$("#uploadForm").form("submit", {
					success: function(result) {
						//将JSON字符串转成JSON对象
						//var result = eval('(' + result + ')');
						result=JSON.parse(result); //注意：JSON.stringify()是将JSON对象转换为字符串，便于网络传输。
						if (result.errorMsg) {
							$.messager.alert("系统提示", result.errorMsg);
						} else {
							$.messager.alert("系统提示", "上传成功");
							$("#uploadDlg").dialog("close");
							$("#dg").datagrid("reload");
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<!-- url属性表示要从Web服务器上请求数据，且与后端交互的是JSON串。交互通过Ajax（XHR）来完成。 -->
		<!-- 可以将jQuery EasyUI涉及到的组件都放在这个页面上统一调度。 -->
		<table id="dg" title="用户管理" class="easyui-datagrid" style="width:1024px;height:450px" url="userList" toolbar="#toolbar"
		 pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
			<thead>
				<tr>
					<th field="id" width="50" hidden="true">编号</th>
					<th field="name" width="50">姓名</th>
					<th field="phone" width="50">电话</th>
					<th field="email" width="50">Email</th>
					<th field="qq" width="50">QQ</th>
				</tr>
			</thead>
		</table>

		<div id="toolbar">
			<div>
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加用户</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除用户</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-import-excel" plain="true" onclick="importUser()">批量导入</a>
			</div>
			<div>
				<!-- href=“javascript:void(0);”意为执行一个js的空方法，这样既执行了链接动作，页面又可以不跳转。 -->
				<input id="searchBox" type="text" style="border:#87CEFA 1px solid;" />
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchUser()">搜索</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-export-excel" plain="true" onclick="exportUser()">导出用户</a>
			</div>
		</div>

		<div id="dlg" class="easyui-dialog" style="width:400px;height:250px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
			<form id="fm" method="post">
				<table cellspacing="10px;">
					<tr>
						<td>姓名：</td>
						<td><input name="name" class="easyui-validatebox" required="true" style="width: 200px;"></td>
					</tr>
					<tr>
						<td>联系电话：</td>
						<td><input name="phone" class="easyui-validatebox" required="true" style="width: 200px;"></td>
					</tr>
					<tr>
						<td>Email：</td>
						<td><input name="email" class="easyui-validatebox" validType="email" required="true" style="width: 200px;"></td>
					</tr>
					<tr>
						<td>QQ：</td>
						<td><input name="qq" class="easyui-validatebox" required="true" style="width: 200px;"></td>
					</tr>
				</table>
			</form>
		</div>

		<div id="dlg-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
		</div>

		<div id="uploadDlg" class="easyui-dialog" style="width:400px;height:180px;padding:10px 20px" closed="true" buttons="#upload-btns">
			<form id="uploadForm" action="fileUpload" method="post" enctype="multipart/form-data">
				<table>
					<tr>
						<td>下载模版：</td>
						<td><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-download" onclick="downloadTemplate()">下载</a></td>
					</tr>
					<tr style="height: 10px;">
					</tr>
					<tr>
						<td>上传文件：</td>
						<td><a href="javascript:$('#upload').click();" class="easyui-linkbutton" iconCls="icon-upload">选择文件</a>
							<input id="upload" type="file" name="userUploadFile" hidden />
							<span id="fileShow"></span>
						</td>
					</tr>
				</table>
			</form>
		</div>

		<div id="upload-btns">
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="uploadFile()">上传</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#uploadDlg').dialog('close')">关闭</a>
		</div>
	</body>
	<script type="text/javascript">
		$("#upload").change(function() {
			var arrs = $(this).val().split('\\');
			var filename = arrs[arrs.length - 1];
			$("#fileShow").html(filename);
		});
	</script>
</html>
